<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 反馈组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    .progress-demo {
      width: 100%;
      max-width: calc(400 * var(--unit));
      margin-bottom: calc(16 * var(--unit));
    }
    
    .tooltip-demo {
      justify-content: center;
      gap: calc(40 * var(--unit));
      margin: calc(40 * var(--unit)) 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title title-large">反馈组件示例</h1>
    
    <!-- 警告提示组件 -->
    <div class="example-section">
      <h2 class="example-section-title">警告提示组件</h2>
      
      <div class="example-group example-group-column">
        <div class="alert alert-success">
          <svg class="alert-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          <div class="alert-content">
            <div class="alert-title">操作成功</div>
            <p class="alert-message">您的操作已成功完成</p>
          </div>
        </div>
        
        <div class="alert alert-warning">
          <svg class="alert-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
          </svg>
          <div class="alert-content">
            <div class="alert-title">警告</div>
            <p class="alert-message">请注意检查您的操作</p>
          </div>
        </div>
        
        <div class="alert alert-error">
          <svg class="alert-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
          </svg>
          <div class="alert-content">
            <div class="alert-title">错误</div>
            <p class="alert-message">操作失败，请重试</p>
          </div>
        </div>
        
        <div class="alert alert-info">
          <svg class="alert-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
          </svg>
          <div class="alert-content">
            <div class="alert-title">提示</div>
            <p class="alert-message">这是一条提示信息</p>
          </div>
          <div class="alert-close">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </div>
        </div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">警告提示样式</h3>
      <div class="alert alert-success alert-banner">
        <div class="alert-content">
          <p class="alert-message">简洁样式的成功提示</p>
        </div>
      </div>
    </div>
    
    <!-- 进度条组件 -->
    <div class="example-section">
      <h2 class="example-section-title">进度条组件</h2>
      
      <h3 class="title title-sub-medium mb-medium">线性进度条</h3>
      <div class="progress-demo">
        <div class="progress">
          <div class="progress-bar progress-bar-demo-0">
            <span class="progress-text-inner">0%</span>
          </div>
          <span class="progress-text">0%</span>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-demo-25">
            <span class="progress-text-inner">25%</span>
          </div>
          <span class="progress-text">25%</span>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-demo-50">
            <span class="progress-text-inner">50%</span>
          </div>
          <span class="progress-text">50%</span>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-demo-75">
            <span class="progress-text-inner">75%</span>
          </div>
          <span class="progress-text">75%</span>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-demo-100">
            <span class="progress-text-inner">100%</span>
          </div>
          <span class="progress-text">100%</span>
        </div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">进度条尺寸</h3>
      <div class="progress-demo">
        <div class="progress progress-small">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
        <div class="progress progress-large">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">进度条颜色</h3>
      <div class="progress-demo">
        <div class="progress">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
        <div class="progress progress-success">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
        <div class="progress progress-warning">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
        <div class="progress progress-error">
          <div class="progress-bar progress-bar-demo-60"></div>
        </div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">动画进度条</h3>
      <div class="progress-demo">
        <div class="progress">
          <div class="progress-bar progress-bar-striped progress-bar-animated progress-bar-demo-60"></div>
        </div>
      </div>
    </div>
    
    <!-- 加载组件 -->
    <div class="example-section">
      <h2 class="example-section-title">加载组件</h2>
      
      <h3 class="title title-sub-medium mb-medium">加载动画</h3>
      <div class="demo-group">
        <div class="loading">
          <div class="loading-spinner"></div>
          <p class="loading-text">加载中...</p>
        </div>
        
        <div class="loading">
          <div class="loading-dots">
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
          </div>
          <p class="loading-text">加载中...</p>
        </div>
        
        <div class="loading">
          <div class="loading-pulse"></div>
          <p class="loading-text">加载中...</p>
        </div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">加载尺寸</h3>
      <div class="demo-group">
        <div class="loading loading-small">
          <div class="loading-spinner"></div>
        </div>
        <div class="loading">
          <div class="loading-spinner"></div>
        </div>
        <div class="loading loading-large">
          <div class="loading-spinner"></div>
        </div>
      </div>
      
      <h3 class="title title-sub-medium mb-medium mt-large">加载颜色</h3>
      <div class="demo-group">
        <div class="loading">
          <div class="loading-spinner"></div>
        </div>
        <div class="loading loading-success">
          <div class="loading-spinner"></div>
        </div>
        <div class="loading loading-warning">
          <div class="loading-spinner"></div>
        </div>
        <div class="loading loading-danger">
          <div class="loading-spinner"></div>
        </div>
      </div>
    </div>
    
    <!-- 空状态组件 -->
    <div class="example-section">
      <h2 class="example-section-title">空状态组件</h2>
      
      <div class="empty">
        <svg class="empty-icon" viewBox="0 0 64 64" fill="currentColor">
          <path d="M32 8C18.7 8 8 18.7 8 32s10.7 24 24 24 24-10.7 24-24S45.3 8 32 8zm0 44c-11 0-20-9-20-20S21 12 32 12s20 9 20 20-9 20-20 20z"/>
          <path d="M32 20c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 16c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2z"/>
        </svg>
        <div class="empty-title">暂无数据</div>
        <p class="empty-description">当前没有数据可显示，请稍后再试或添加新内容</p>
        <div class="empty-action">
          <button class="button button-primary">刷新</button>
        </div>
      </div>
    </div>
    
    <!-- 工具提示组件 -->
    <div class="example-section">
      <h2 class="example-section-title">工具提示组件</h2>
      
      <div class="example-group tooltip-demo">
        <div class="tooltip tooltip-top">
          <button class="button button-secondary">顶部提示</button>
          <div class="tooltip-content">
            <div class="tooltip-arrow"></div>
            这是顶部的工具提示
          </div>
        </div>
        
        <div class="tooltip tooltip-bottom">
          <button class="button button-secondary">底部提示</button>
          <div class="tooltip-content">
            <div class="tooltip-arrow"></div>
            这是底部的工具提示
          </div>
        </div>
        
        <div class="tooltip tooltip-left">
          <button class="button button-secondary">左侧提示</button>
          <div class="tooltip-content">
            <div class="tooltip-arrow"></div>
            左侧提示
          </div>
        </div>
        
        <div class="tooltip tooltip-right">
          <button class="button button-secondary">右侧提示</button>
          <div class="tooltip-content">
            <div class="tooltip-arrow"></div>
            右侧提示
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

